<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>新增页面</title>
		<link href="../../static/component/pear/css/pear.css" rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>
	</head>
	<body>
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">
					<div class="layui-form-item">
						<label class="layui-form-label">上级菜单</label>
						<input type="hidden" name="id" id="id" autocomplete="off"
							   class="layui-input" th:value="${permission.id}">
						<div class="layui-input-block" id="parentidchange">
							<div th:if="${permission.parent_id ==0}">
								<input type="hidden" name="parent_id" id="parent_id" autocomplete="off"
									   class="layui-input" th:value="${permission.parent_id}" disabled>
								<input type="text" name="parent_idname" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称"
									   class="layui-input" value="无" disabled>
							</div>
							<div th:if="${permission.parent_id !=0}">
								<input type="hidden" name="parent_id" id="parent_id" autocomplete="off"
									   class="layui-input" th:value="${permission.parent_id}" disabled>
								<input type="text" name="parent_idname" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称"
									   class="layui-input" th:value="${permission.title}" id="parent_idname">
							</div>

						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单类型</label>
						<div class="layui-input-block" onclick="gettypechangecss()">
							<input type="radio" name="type" value="0" title="目录" th:checked="${permission.type=='0'}" lay-filter="type">
							<input type="radio" name="type" value="1" title="菜单" th:checked="${permission.type=='1'}" lay-filter="type">
							<input type="radio" name="type" value="2" title="按钮" th:checked="${permission.type=='2'}" lay-filter="type">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单名称</label>
						<div class="layui-input-block">
							<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称"
								class="layui-input" th:value="${permission.title}">
						</div>
					</div>
					<div id="href">
						<div class="layui-form-item">
							<label class="layui-form-label">请求地址</label>
							<div class="layui-input-block">
								<input type="text" name="href" lay-verify="title" autocomplete="off" placeholder="请输入请求地址"
									   class="layui-input" th:value="${permission.href}">
							</div>
						</div>
					</div>
					<div id="openType">
						<div class="layui-form-item">
							<label class="layui-form-label">打开方式</label>
							<div class="layui-input-block">
								<select name="openType">
									<option value="" th:selected="${permission.openType==null}">页签</option>
									<option value="_iframe" th:selected="${permission.openType!=null}">新窗口</option>
								</select>
							</div>
						</div>
					</div>
					<div id="power_code">
						<div class="layui-form-item">
							<label class="layui-form-label">权限标识</label>
							<div class="layui-input-block">
								<input type="text" name="power_code" lay-verify="title" autocomplete="off" placeholder="请输入权限标识"
									   class="layui-input" th:value="${permission.power_code}">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">显示排序</label>
						<div class="layui-input-block">
							<input type="number" name="sort" lay-verify="title" autocomplete="off" placeholder="请输入排序"
								class="layui-input" th:value="${permission.sort}">
						</div>
					</div>
					<div  id="icon">
						<div class="layui-form-item">
							<label class="layui-form-label">图标选择</label>
							<div class="layui-input-block">
								<input type="text" name="icon" id="iconPicker2" value="" lay-filter="iconPicker2"
									   th:value="${permission.icon}">
							</div>
						</div>
					</div>
					<div id="enable">
						<div class="layui-form-item">
							<label class="layui-form-label">菜单状态</label>
							<div class="layui-input-block">
								<input type="radio" name="enable" value="1" title="显示" th:checked="${permission.enable==1}">
								<input type="radio" name="enable" value="0" title="隐藏" th:checked="${permission.enable==0}">
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
						lay-filter="power-save">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../static/component/layui/layui.js" th:src="@{/static/component/layui/layui.js}"></script>
		<script src="../../static/component/pear/pear.js" th:src="@{/static/component/pear/pear.js}"></script>
		<script>
			let $ = layui.jquery;
			layui.use(['form', 'jquery','dtree','iconPicker','popup'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let dtree = layui.dtree;
				let icon = layui.iconPicker;
				icon.render({
					elem: '#iconPicker2',
					type: 'fontClass',
					search: true,
					page: true,
					limit: 16,
					click: function(obj) {
						console.log(obj)
					},
					ready: function() {
						console.log(1)
					}
				});

				layer.ready(function(){
					gettypechangecss();
				});
				form.on('submit(power-save)', function(data) {
					$.ajax({
						data: JSON.stringify(data.field),
						dataType: 'json',
						url: "/system/power/save",
						contentType: 'application/json',
						type: 'post',
						success: function(result) {
							if (result.code === 0) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									parent.layer.close(parent.layer.getFrameIndex(window
										.name)); //关闭当前页
									parent.layui.treetable.reload("#power-table");
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						},
						error:function () {
							layer.alert("网络错误")
						}
					})
					return false;
				});
				$("#parentidchange").click(function(){
						let parent_id = $("input[name='parent_id']").val();
						if (parent_id ==="0"){
							// popup.failure("主菜单不能修改")
							layer.alert("主菜单不能修改");
						}else {
							layer.open({
							    type: 1, //type:0 也行
							    title: "选择树",
							    area: ["400px", "80%"],
							    content: '<ul id="openTree4" class="dtree" data-id="0"></ul>',
							    btn: ['确认选择'],
							    success: function(layero, index){
							        var DTree = dtree.render({
							            obj: $(layero).find("#openTree4"),
							            url: "/system/power/menustree",
							            initLevel: "1",
							            method: 'get',
							            skin: "zdy",
							            dataStyle: "layuiStyle",// 指定数据格式  list 格式
							            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
							            select: true,
							            accordion: true,  // 开启手风琴
							            done: function(data, obj, first){  //使用异步加载回调
							                if(first) {
							                    var reportId = $("#reportId4").val();
							                    dtree.dataInit("openTree4", reportId); // 初始化值
							                }
							            }
							        });
							        dtree.on("nodedblclick('openTree4')", function(obj){
							            $("#parent_id").val(obj.param.nodeId);
							            $("#parent_idname").val(obj.param.context);
							            layer.close(index);
							        });
							    },
							    yes: function(index, layero) {
							        var param = dtree.getNowParam("openTree4"); // 获取当前选中节点
							        $("#parent_id").val(param.nodeId);
							        $("#parent_idname").val(param.context);
							        layer.close(index);
							    }
							});
						}
				});
			})
			function gettypechangecss() {
				let number = $("input[name='type']:checked").val();
				if (number === "0"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");

					$("#href").css("display","none");
					$("#openType").css("display","none");
					$("#power_code").css("display","none");
				}
				if (number === "1"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");
				}
				if (number === "2"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");

					$("#href").css("display","none");
					$("#openType").css("display","none");
					$("#icon").css("display","none");
					$("#enable").css("display","none");
				}
				// console.log(number)
			}
		</script>
	</body>
</html>
